<!--slot插槽操作-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
  <todo>
    <todo-head slot="todo-head" v-bind:title="head_content"></todo-head>
    <todo-content slot="todo-content" v-for="(item,index) in items_content" v-bind:item="item" v-bind:index="index"></todo-content>
  </todo>
</div>
<script>
/*  创建一个组件
<slot name="todo-head"></slot> 使用slot绑定其他组件
*/
  Vue.component('todo',{
    template:'<div>' +
                '<slot name="todo-head"></slot>' +
                  '<ul>' +
                    '<slot name="todo-content"></slot>' +
                  '</ul>' +
              '</div>',
  });
  //创建一个组件
  Vue.component('todo-head',{
    props:['title'],
    template:'<div>{{title}}</div>',
  });
  //创建一个组件
  Vue.component('todo-content',{
    props:['item','index'],
    template:'<li>{{item}}{{index}}</li>',
  });
  var vm = new Vue({
    el:"#one",
    data:{
      head_content:'这是个列表',
      items_content:['A','B','C'],
    }
  });
</script>
</body>
</html>